<template>
  <div class="goods-detail">
    <!-- 属性 -->
    <ul class="attrs">
      <li v-for="item in goods.details.properties" :key="item.value">
        <span class="dt">{{ item.name }}</span>
        <span class="dd">{{ item.value }}</span>
      </li>
    </ul>
    <!-- 图片 -->
    <!-- 电商特点:详情处,一般是多个图拼为一个大图

         为什么不用一个整大图?
         目的: 下载快,分开加载,不会一整块大图加载(用户体验感好)
         缺点: 请求的次数就多了

          优化方案:
           v-ilazy="item"   :src="load"   这里是调用了自定义的全局指令--图片懒加载

        -->
    <img
      v-for="item in goods.details.pictures"
      :key="item"
      v-ilazy="item"
      :src="load"
      alt=""
    />
  </div>
</template>
<script>
// 接收注入事件
import { inject } from 'vue'

export default {
  // 商品详情
  name: 'GoodsDetail',

  setup () {
    const goods = inject('goods')
    return { goods }
  }
}
</script>
<style scoped lang="less">
.goods-detail {
  padding: 40px;
  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;
      .dt {
        width: 100px;
        color: #999;
      }
      .dd {
        flex: 1;
        color: #666;
      }
    }
  }
  > img {
    width: 100%;
  }
}
</style>
